// 设置基地址
axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net';

// 获取元素
const form = document.querySelector('#bookForm');
const tb = document.querySelector('#tb');
const search = document.querySelector('#search-for');

// 进入渲染页面
// 封装渲染函数
const renderBooks = () => {
  // 发起请求，请求渲染数据
  axios
    .get('/api/getbooks')
    .then(({data: res}) => {
      const {data} = res
      // console.log(data);

      const html = data.map(item => {
          return `
          <tr>
            <td>${item.id}</td>
            <td>${item.bookname}</td>
            <td>${item.author}</td>
            <td>${item.publisher}</td>
            <td><a href="#" data-id="${item.id}">删除</a></td>
          </tr> `
      }).join('')

      // 渲染真实dom
      tb.innerHTML = html
    })
}


// 页面加载，调用渲染函数渲染页面
renderBooks()

form.addEventListener('submit', function (e) {
  // 阻止默认提交事件
  e.preventDefault()

  // 使用serialize插件获取表单数据
  const data = serialize(form, {hash: true})

  // 发起添加请求
  axios
    .post('/api/addbook', data)
    .then(({data: res}) => {
      alert(res.msg)

      if(res.status !== 201) return

      // 添加后清空输入框
      this.reset()

      // 成功添加后重新渲染页面
      renderBooks()
    })
});


// 删除事件
tb.addEventListener('click', function(e) {
    if(e.target.tagName === 'A') {
        // 获取自定义属性id
        // console.log(e.target.dataset.id);
        let id = e.target.dataset.id

        // 发起删除请求
        axios
          .get('/api/delbook?id=' + id)
          .then(({data: res}) => {
            // 删除完以后重新刷新
            renderBooks()
          })
    }
})

// 搜索按钮
// search.addEventListener('click', function(e) {
//   // 阻止默认提交事件
//   e.preventDefault()

//   // 使用serialize插件获取表单数据
//   const data = serialize(form, {hash: true})
//   // console.log(data);

//   // 发送请求
//   axios
//     .get('/api/getbooks', {params: data})
//     .then(({data: res}) => {
//       const data = res.data
//       console.log(data);

//       const html = data.map(item => {
//         return `
//         <tr>
//           <td>${item.id}</td>
//           <td>${item.bookname}</td>
//           <td>${item.author}</td>
//           <td>${item.publisher}</td>
//           <td><a href="#" data-id="${item.id}">删除</a></td>
//         </tr> `
//       }).join('')

//     // 渲染真实dom
//     tb.innerHTML = html
//     })
// })

search.addEventListener('click', function (e) {
  e.preventDefault()

  const value = serialize(form)
  // console.log(value);

  axios
    .get('/api/getbooks?' + value)
    .then(({data: res}) => {
      const data = res.data
      console.log(data);
      tb.innerHTML = data.map((item) => {
        return `
        <tr>
          <td>${item.id}</td>
          <td>${item.bookname}</td>
          <td>${item.author}</td>
          <td>${item.publisher}</td>
          <td><a href="#" data-id="${item.id}">删除</a></td>
        </tr> `
      }).join('')
      form.reset()
    })
})